<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>订单列表</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <style>
        .layui-table-cell{
            height: auto;
        }
    </style>
</head>
<body>
<blockquote class="layui-elem-quote">订单列表</blockquote>
<form class="layui-form layui-form-pane">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">订单号</label>
            <div class="layui-input-inline">
                <input class="layui-input" type="text" name="id">
            </div>
        </div>

        <div class="layui-inline">
            <div class="layui-input-inline">
                <button class="layui-btn layui-bg-blue" lay-submit lay-filter="search">
                    <i class="layui-icon layui-icon-search"></i>
                </button>
            </div>
        </div>

    </div>
</form>
<table id="order-list" lay-filter="order-list"></table>

<script type="text/html" id="bar">
    {{# if (d.status==1){ }}
    <a class="layui-btn layui-btn-sm layui-bg-blue" lay-event="send">发货</a>
    {{# } else { }}
    <a class="layui-btn layui-btn-sm layui-bg-red" lay-event="down">其它</a>
    {{# } }}
</script>



<script src="/layui/layui.js"></script>
<script>
    layui.use(['form', 'table'], () => {
        const form = layui.form;
        const table = layui.table;
        const $ = layui.$;

        //渲染表格
        table.render({
            elem: '#order-list',
            url: '/order/search',
            page: true,
            toolbar: '#toolbar',
            cols: [[
                {type: 'checkbox'},
                {title: 'ID', field: 'id'},
                {title: '订单日期', field: 'createTime'},
                {title: '快递号', field: 'express'},
                {
                    title: '支付方式', templet(d) {
                        return ['余额', '支付宝','微信','其它'][d.payType];
                    }
                },
                {title: '用户', field: 'userName'},
                {title: '详细信息', field: 'addrDetail'},
                {title: '操作', width: 220, toolbar: '#bar'},
            ]],
            parseData(result) {
                return {
                    code: result.code,
                    msg: result.msg,
                    count: result.data ? result.data.total : 0,
                    data: result.data ? result.data.list : null,
                };
            }
        });

        //搜索表单
        form.on('submit(search)', (data) => {
            //刷新表格
            table.reloadData('order-list', {
                where: data.field,
                page: {curr: 1},//页码回到第
            });
            //阻止表单提交
            return false;
        });


        table.on('tool(order-list)', (row) => {
            if (row.event == 'send') {
                //禁用
                sendOutGoods(row.data);
            }
        });

        function sendOutGoods(order) {
            layer.confirm('确定要发货吗？', function (index) {
                layer.close(index);
                edit({id: order.id, status: 2});
            })
        }

        function edit(order) {
            $.ajax({
                url: '/order/edit',
                data: order,
                type: 'post',
                dataType: 'json',
                success(result) {
                    if (result.code == 0) {
                        layer.msg('操作成功！', {icon: 6});
                    } else {
                        layer.msg(result.msg, {icon: 5});
                    }
                    //刷新表格
                    table.reloadData('order-list');
                },
                error() {
                    layer.msg('请求失败', {icon: 5});
                }
            });
        }
    });
</script>
</body>
</html>